<template>
	<div class="article">
		<u-navbar :is-back="false" title="文章详情">
			<view class="navbar flex">
				<div class="copy-box">
					<i class="copy" @click="isCopyOpt=!isCopyOpt"></i>
					<div class="copy-opt" v-if="isCopyOpt">
						<div class="copy-item" @click="copy(article.title+'\n'+article.url)">复制全部</div>
						<div class="copy-item" @click="copy(article.title+'\n'+article.url)">复制标题和链接</div>
						<div class="copy-item" @click="copy(article.title+'\n'+(article.content || (article.ocr_dic && article.ocr_dic[Object.keys(article.ocr_dic)[0]])))">复制标题和正文</div>
					</div>
				</div>
			</view>
		</u-navbar>
		<div class="mask" v-if="isCopyOpt" @click="isCopyOpt=false"></div>
		<div class="top">
			<div class="title">
				<span class="a" :class="'a-'+article.warn_level" v-if="article.warn_level">{{ article.warn_level==1?"一般":(article.warn_level==2?"严重":"重大") }}</span>
				<u-parse class="b" v-if="article.title" :html="marked(article.keywords, article.title)"></u-parse>
				<i class="copy" @click="copy(article.title)"></i>
			</div>
			<div class="des flex">
				<span class="sen" :class="'sen-'+article.sentiment_attr">{{article.sentiment_attr_name}}</span>
				<span class="platform">{{article.publisher_site_name || article.gather_site_name}}</span>
			</div>
			<div class="user">{{article.name}}</div>
			<div class="link">原文链接：
				<a :href="article.url" target="_blank">{{article.url}}</a><i class="copy" @click="copy(article.url)"></i>
			</div>
		</div>
		<div class="content">
			<div class="video-box" v-if="article.video">
				<video :src="article.video[0]" :poster="(article.gather_site_name=='新浪微博视频'?'https://image.baidu.com/search/down?url=':'')" controls="controls" style="height: 100%; width: 100%; outline: none; background-color: rgb(0, 0, 0);"></video>
			</div>
			<div class="detail" v-if="article.publication_type==1">
				<u-parse class="b" :html="marked(article.keywords, article.html || article.content || (article.ocr_dic && article.ocr_dic[Object.keys(article.ocr_dic)[0]]) || '')"></u-parse>
				<i class="copy" @click="copy(article.content || (article.ocr_dic && article.ocr_dic[Object.keys(article.ocr_dic)[0]]))"></i>
			</div>
			<div class="detail" v-else>
				<div class="repost">转评：{{ article.title }}</div>
				<div class="source-box">
					<div class="text">{{ article.retweeted_content }}</div>
					<div class="time flex">
						<span>{{ $u.timeFormat(article.retweeted_publish_time*1000, "yyyy-mm-dd hh:MM") }}</span>
						<div class="retweeted-right flex">
							<u-icon class="retweeted-user" name="account-fill" color="#999" size="28"></u-icon>
							<span class="source-text-name">{{ article.retweeted_user_name }}</span>
						</div>
					</div>
				</div>
			</div>
			<!-- 图片 -->
			<div class="imgs" v-if="article.ocr_dic">
				<div class="img-i" v-for="(item, index) in article.ocr_dic" :key="index">
					<u-image mode="widthFix" width="100%" error-icon="" :src="((article.gather_site_name.includes('新浪微博')||article.gather_site_name=='微信') ? 'https://image.baidu.com/search/down?url=' : '')+index"></u-image>
					<div>【OCR】：{{item}}</div>
				</div>
			</div>
		</div>
		<u-toast ref="uToast" />
	</div>
</template>

<script>
import { webArticleDetailOpen } from "../../api/subject.js";
	
export default {
	data() {
		return {
			article: {},
			isCopyOpt: false,
		};
	},
	onLoad(option) {
		uni.showLoading({
			title: "加载中"
		});
		webArticleDetailOpen({
			sid: option.sid,
			subject_id: option.subject_id,
		}).then(({data})=>{
			uni.hideLoading();
			this.article = data;
		})
	},
	methods: {
		copy(data) {
			this.isCopyOpt = false;
			uni.setClipboardData({
				data: data,
				showToast: false,
				success: ()=>{
					this.$refs.uToast.show({
						title: "复制成功",
						type: "success",
					});
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
page{
	background-color: #FAFAFA;
}
.article{
	background-color: #fff;
}
.mask{
	position: fixed;
	z-index: 400;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #fff;
	opacity: 0;
}
.navbar{
	width: 100%;
	justify-content: flex-end;
	.copy-box{
		margin-right: 20rpx;
		position: relative;
		z-index: 500;
	}
	.copy-opt{
		position: absolute;
		z-index: 500;
		background-color: #000;
		color: #fff;
		right: 0;
		border-radius: 10rpx;
	}
	.copy-item{
		width: 220rpx;
		text-align: center;
		font-size: 28rpx;
		padding: 20rpx 0;
		box-sizing: border-box;
		border-bottom: 1px solid #333;
		cursor: pointer;
		
		&:last-child{
			border-bottom: none;
		}
	}
}
.top{
	padding: 40rpx;
	.title{
		.a{
			display: inline-block;
			font-size: 24rpx;
			width: 80rpx;
			height: 40rpx;
			line-height: 40rpx;
			border-radius: 5rpx;
			color: #fff;
			text-align: center;
		}
		.a-1{
			background: #F8A422;
		}
		.a-2{
			background: #FD5E3A;
		}
		.a-3{
			background: #C60202;
		}
		.b{
			display: inline;
			font-size: 32rpx;
			line-height: 42rpx;
			font-weight: bold;
			margin-left: 10rpx;
			margin-right: 10rpx;
		}
	}
	.des{
		color: #999;
		font-size: 26rpx;
		margin-top: 20rpx;
	}
	.sen{
		width: 36rpx;
		height: 36rpx;
		text-align: center;
		line-height: 36rpx;
		color: #fff;
		font-size: 24rpx;
		margin-right: 20rpx;
		border-radius: 6rpx;
	}
	.sen-1{
		background-color: #5D99F2;
	}
	.sen-2{
		background-color: #FFA741;
	}
	.sen-3{
		background-color: #FF0000;
	}
	.user{
		color: #999;
		font-size: 26rpx;
		margin-top: 6rpx;
	}
	.link{
		word-break: break-all;
		margin-top: 20rpx;
		font-size: 24rpx;
	}
	a{
		color: #007eff;
		margin-right: 10rpx;
	}
}
.copy{
	cursor: pointer;
	display: inline-block;
	width: 40rpx;
	height: 40rpx;
	border-radius: 4rpx;
	background: #EDF3FD url(./../../static/copy-1.png) no-repeat center/contain;
	transform: translateY(6rpx);
	margin-left: 10rpx;
}
.content{
	padding: 40rpx;
	padding-top: 0;
	.video-box{
		width: 100%;
		height: 400rpx;
	}
	.detail{
		margin-top: 20rpx;
		font-size: 28rpx;
	}
}
.source-box{
	border: 1rpx solid #1E62FC;
	padding: 10rpx;
	border-radius: 10rpx;
	margin: 10rpx 0;
	.text{
		font-size: 28rpx;
	}
	.time{
		justify-content: space-between;
		margin-top: 20rpx;
		font-size: 26rpx;
	}
}
.imgs{
	padding: 20rpx;
}
/deep/ #_top{
	display: inline;
	div{
		display: inline;
	}
}
</style>
